<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React的使用</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="js/browser.js"></script>
</head>
<body>
    <h1>React的使用</h1>
    <div id="app"></div>
    <script type="text/babel">
        let username = 'jingjing';
        let style = {color:'#f00'}
        let list = <ul>
            <li>data1</li>
            <li>data2</li>
            <li>data3</li>
        </ul>
        ReactDOM.render(
            // React.createElement(
            //     'div',
            //     {className:'container'},
            //     [
            //         React.createElement('h4',null,'创建虚拟节点'),
            //         React.createElement(
            //             'ul',
            //             {id:'list'},
            //             [
            //                 React.createElement('li',null,'data1'),
            //                 React.createElement('li',null,'data2'),
            //             ]
            //         ),
            //     ]
            // ),

            // JSX
            // <div className="container">
            //     <h4>创建虚拟节点</h4>
            //     <ul id="list">
            //         <li>data1</li>
            //         <li>data2</li>
            //     </ul>
            // </div>
            
            <div style={style}>
                {
                    //<label htmlFor="username">用户名</label>
                }
                {/*<input type="text" value={username} />
                <p>{username}</p>*/}
                {list}
            </div>
            ,
            // 挂载点
            document.querySelector('#app')
        )
    </script>
</body>
</html>